<template>
  <van-overlay show @click="handleClose">
    <div @click.stop>
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item title="筛选" ref="item">
          <div class="p-30">工作区域</div>
          <div class="flex p-lr-30 btn-cont flex-wrap">
            <van-button
              round
              color="#ff9700"
              size="mini"
              v-for="(item, index) in areaList"
              :key="index"
              :plain="!item.ischeck"
              @click="handleArea(index)"
              >{{item.name}}</van-button
            >
          </div>
          <div class="p-30">学历要求</div>
          <div class="flex p-lr-30 btn-cont flex-wrap">
            <van-button
              round
              color="#ff9700"
              size="mini"
              v-for="(item, index) in eduList"
              :key="index"
              :plain="!item.ischeck"
              @click="handleEdu(index)"
              >{{item.name}}</van-button
            >
          </div>
          <div class="p-30">性别要求</div>
          <div class="flex p-lr-30 btn-cont flex-wrap">
            <van-radio-group v-model="gender" direction="horizontal" checked-color="#ff9700">
              <van-radio name="0">不限</van-radio>
              <van-radio name="1">女生</van-radio>
              <van-radio name="2">男生</van-radio>
            </van-radio-group>
          </div>
          <div class="flex p-t-30">
             <van-button type="warning" block plain @click="onReset">
              重置
            </van-button>
            <van-button type="warning" block @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
  </van-overlay>
</template>

<script>
export default {
  data() {
    return {
      // show:true,
      value1: 0,
      value2: 0,
      switch1: false,
      switch2: false,
      option1: [
        { text: "全部岗位", value: 0 },
        { text: "新款岗位", value: 1 },
        { text: "热门岗位", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: 0 },
        { text: "薪资排序", value: 1 },
        { text: "距离排序", value: 2 },
      ],
      areaList: [
        { name: "全部", ischeck: true },
        { name: "渝中区", ischeck: false },
        { name: "渝北区", ischeck: false },
        { name: "沙坪坝区", ischeck: false },
        { name: "九龙坡区", ischeck: false },
        { name: "江北区", ischeck: false },
        { name: "北碚区", ischeck: false },
      ],
      areaIdx:0,
      eduList:[
        { name: "不限", ischeck: true },
        { name: "博士", ischeck: false },
        { name: "硕士", ischeck: false },
        { name: "本科", ischeck: false },
        { name: "专科", ischeck: false },
        { name: "高中", ischeck: false }
      ],
      eduIdx:0,
      gender:"0"
    };
  },
  methods: {
    onConfirm() {
      //确认时，获取用户勾选的条件\
      let {areaList,areaIdx,eduIdx,gender} = this
      // console.log(areaIdx,eduIdx,gender);
      // let obj = {
      //   district:areaList[areaIdx].name, //区名
      //   edu:eduIdx,
      //   gender
      // }
      let obj = {}
      if(areaIdx!=0){ 
        obj.district=areaList[areaIdx].name
      }
      if(eduIdx!=0){
        obj.edu = eduIdx
      }
      if(gender!=0){
        obj.gender = gender
      }
      console.log(obj);
      this.$store.commit('job/changeConditionMut',obj)
      this.handleClose()
      // this.$refs.item.toggle();
    },
    handleClose() { //关闭弹窗
      this.$emit("on-close");
    },
    onReset(){

    },
    handleArea(idx){ //区域选择
      let {areaList} = this
      let len = areaList.length
      for(let i=0;i<len;i++){
        if(areaList[i].ischeck){
          areaList[i].ischeck = false
          break
        }
      }
      this.areaList[idx].ischeck = true
      this.areaIdx = idx
    },
    handleEdu(idx){ //学历选择
      let {eduList} = this
      let len = eduList.length
      for(let i=0;i<len;i++){
        if(eduList[i].ischeck){
          eduList[i].ischeck = false
          break
        }
      }
      this.eduList[idx].ischeck = true
      this.eduIdx = idx
    }
  },
};
</script>

<style lang="less" scoped>
.btn-cont .van-button {
  margin-right: 3rem;
  margin-bottom: 1.5rem;
}
.van-button--mini+.van-button--mini{
  margin-left:0 ;
}
</style>
